<template>
	<cl-dialog
		v-model="visible"
		class="tongkang-view-order"
		width="90%"
		:close-on-click-modal="false"
	>
		<el-card shadow="never">
			<template #header>
				<div class="card-header">
					<span>镜片订单详情</span>
				</div>
			</template>
			<el-form :model="orderData" label-width="120px" size="default">
				<el-divider content-position="left" v-if="orderData.orderProgress > 2"
					>退货单基本信息</el-divider
				>
				<el-row v-if="orderData.orderProgress > 2">
					<el-col :span="24">
						<div class="confirm-section">
							<p class="confirm-item">
								<span class="confirm-label">服务类型:</span>
								<span class="confirm-value">{{
									refundData.refundType === 1 ? '退货' : '换货'
								}}</span>
							</p>
							<p class="confirm-item">
								<span class="confirm-label">退换货原因:</span>
								<span class="confirm-value">{{ refundData.reason }}</span>
							</p>
							<p class="confirm-item">
								<span class="confirm-label">退款单号:</span>
								<span class="confirm-value">{{ refundData.refundNo }}</span>
							</p>
							<p class="confirm-item">
								<span class="confirm-label">商品名称:</span>
								<!-- 镜框品牌 镜框型号 -->
								<span class="confirm-value">{{ refundData.goodsName }}</span>
							</p>
							<p class="confirm-item">
								<span class="confirm-label">申请日期:</span>
								<span class="confirm-value">{{ refundData.createTime }}</span>
							</p>
							<div>
								<span class="confirm-label">凭证照片:</span>
								<cl-upload
									v-model="refundData.proofImages"
									draggable
									multiple
									:disabled="true"
								/>
							</div>
							<!-- <p v-if="formData.proofImages.length > 0" class="confirm-item">
							<span class="confirm-label">上传凭证:</span>
							<span class="confirm-value"
								>{{ formData.proofImages.length }} 张图片</span
							>
						</p> -->
						</div>
					</el-col>
				</el-row>
				<el-divider content-position="left">收货基本信息</el-divider>
				<el-row>
					<el-col :span="12">
						<el-form-item label="收货人">
							<!-- <el-input
								v-model="orderData.contactName"
								readonly
								style="background-color: #f5f7fa"
							/> -->
							<span>{{ orderData.contactName }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="收货电话">
							<!-- <el-input
								v-model="orderData.contactPhone"
								readonly
								style="background-color: #f5f7fa"
							/> -->
							<span>{{ orderData.contactPhone }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="收货地址">
							<!-- <el-input
								v-model="orderData.receiveAddress"
								readonly
								style="background-color: #f5f7fa"
							/> -->
							<span>{{ orderData.receiveAddress }}</span>
						</el-form-item>
					</el-col>

					<el-col :span="24" style="display: none">
						<el-form-item label="备注">
							<!-- <el-input
								v-model="orderData.remark"
								readonly
								style="background-color: #f5f7fa"
							/> -->
							<span>{{ orderData.remark }}</span>
						</el-form-item>
					</el-col>

					<el-col v-if="orderObj.payImg" :span="12">
						<el-form-item label="支付截图">
							<cl-upload v-model="orderObj.payImg" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="验光单">
							<cl-upload v-model="orderObj.eyeglassImg" disabled />
						</el-form-item>
					</el-col>
				</el-row>
				<el-divider content-position="left">门店订单基本信息</el-divider>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="系统订单编号">
							<!-- <el-input
								v-model="orderData.order_no"
								readonly
								style="background-color: #f5f7fa"
							/> -->
							<span>{{ orderData.order_no }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="门店下单时间">
							<!-- <el-input
								v-model="orderData.shopOrderTime"
								readonly
								style="background-color: #f5f7fa"
							/> -->
							<span>{{ orderData.shopOrderTime }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="用户名" prop="data.o.c_shop_name">
							<!-- <el-input v-model="remarkObj.userName" readonly /> -->
							<span>{{ remarkObj.userName }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="订单备注" prop="data.o.c_shop_name">
							<!-- <el-input v-model="remarkObj.remark" readonly /> -->
							<span>{{ remarkObj.remark }}</span>
						</el-form-item>
					</el-col>
				</el-row>
				<!-- 订单基本信息 -->
				<el-divider content-position="left">瞳康订单基本信息</el-divider>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="厂家订单编号">
							<!-- <el-input
								v-model="orderData.tongkangOrderNo"
								readonly
								style="background-color: #f5f7fa"
							/> -->
							<span>{{ orderData.tongkangOrderNo }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="下单时间">
							<!-- <el-input
								v-model="orderData.tongkangOrderTime"
								readonly
								style="background-color: #f5f7fa"
							/> -->
							<span>{{ orderData.tongkangOrderTime }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="订单状态">
							<!-- <el-input
								v-model="orderData.status_text"
								readonly
								style="background-color: #f5f7fa"
							/> -->
							<span>{{ orderData.status_text }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="快递单号">
							<!-- <el-input
								v-model="orderData.kddh"
								readonly
								style="background-color: #f5f7fa"
							/> -->
							<span>{{ orderData.kddh }}</span>
						</el-form-item>
					</el-col>
				</el-row>

				<!-- 镜片数据 -->
				<el-divider content-position="left">镜片数据</el-divider>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="镜片">
							<div class="inline-flex-container">
								<!-- <el-input
									v-model="orderData.c_goods_l_desc"
									readonly
									style="
										width: auto;
										min-width: 300px;
										margin-right: 8px;
										background-color: #f5f7fa;
									"
								/> -->
								<span style="min-width: 300px; margin-right: 8px">{{
									orderData.c_goods_l_desc
								}}</span>
								<!-- <div style="display: flex; align-items: center;">
                  <span style="margin-right: 4px;">数量：</span>
                  <el-input v-model="orderData.c_lnum" readonly style="width: 100px; background-color: #f5f7fa;" />
                </div> -->
							</div>
						</el-form-item>
					</el-col>
					<!-- 镀膜类型 -->
					<el-col :span="12">
						<el-form-item label="镀膜" prop="data.o.c_coating_type">
							<!-- <el-input
								v-model="orderData.c_coating_type_name"
								readonly
								style="background-color: #f5f7fa"
							/> -->
							<span>{{ orderData.c_coating_type_name }}</span>
						</el-form-item>
					</el-col>
					<!-- <el-col :span="12">
            <el-form-item label="右镜片">
              <div class="inline-flex-container">
                <el-input v-model="orderData.c_goods_r_desc" readonly style="width: auto; min-width: 300px; margin-right: 8px; background-color: #f5f7fa;" />
                <div style="display: flex; align-items: center;">
                  <span style="margin-right: 4px;">数量：</span>
                  <el-input v-model="orderData.c_rnum" readonly style="width: 100px; background-color: #f5f7fa;" />
                </div>
              </div>
            </el-form-item>
          </el-col> -->

					<el-col :span="12">
						<el-form-item label="右直径R">
							<!-- <el-input
								v-model="orderData.c_diar"
								readonly
								style="background-color: #f5f7fa"
							/> -->
							<span>{{ orderData.c_diar }}</span>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="左直径R">
							<!-- <el-input
								v-model="orderData.c_dial"
								readonly
								style="background-color: #f5f7fa"
							/> -->
							<span>{{ orderData.c_dial }}</span>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="右球镜">
							<!-- <el-input
								v-model="orderData.c_rball"
								readonly
								style="background-color: #f5f7fa"
							/> -->
							<span>{{ orderData.c_rball }}</span>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="左球镜">
							<!-- <el-input
								v-model="orderData.c_lball"
								readonly
								style="background-color: #f5f7fa"
							/> -->
							<span>{{ orderData.c_lball }}</span>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="右柱镜">
							<!-- <el-input
								v-model="orderData.c_rpole"
								readonly
								style="background-color: #f5f7fa"
							/> -->
							<span>{{ orderData.c_rpole }}</span>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="左柱镜">
							<!-- <el-input
								v-model="orderData.c_lpole"
								readonly
								style="background-color: #f5f7fa"
							/> -->
							<span>{{ orderData.c_lpole }}</span>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="右后表面离焦量" v-if="orderData.c_radd != '' || orderData.c_ladd != ''">
							<!-- <el-input
								v-model="orderData.c_radd"
								readonly
								style="background-color: #f5f7fa"
							/> -->
							<span>{{ orderData.c_radd }}</span>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="左后表面离焦量" v-if="orderData.c_ladd != '' || orderData.c_radd != ''">
							<!-- <el-input
								v-model="orderData.c_ladd"
								readonly
								style="background-color: #f5f7fa"
							/> -->
							<span>{{ orderData.c_ladd }}</span>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="右散光轴向">
							<!-- <el-input
								v-model="orderData.c_rline"
								readonly
								style="background-color: #f5f7fa"
							/> -->
							<span>{{ orderData.c_rline }}</span>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="左散光轴向">
							<!-- <el-input
								v-model="orderData.c_lline"
								readonly
								style="background-color: #f5f7fa"
							/> -->
							<span>{{ orderData.c_lline }}</span>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="右瞳距" prop="data.o.c_rpole">
							<!-- <el-input v-model="orderData.pd_r" placeholder="例子：179" /> -->
							<span>{{ orderData.pd_r }}</span>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="左瞳距" prop="data.o.c_lpole">
							<!-- <el-input v-model="orderData.pd_l" placeholder="例子：179" /> -->
							<span>{{ orderData.pd_l }}</span>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="右瞳高" prop="data.o.c_rpole">
							<!-- <el-input v-model="orderData.ph_r" placeholder="例子：179" /> -->
							<span>{{ orderData.ph_r }}</span>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="左瞳高" prop="data.o.c_lpole">
							<!-- <el-input v-model="orderData.ph_l" placeholder="例子：179" /> -->
							<span>{{ orderData.ph_l }}</span>
						</el-form-item>
					</el-col>

					<el-divider content-position="left">加工模块</el-divider>
					<!-- 是否加工 -->
					<el-col :span="12">
						<el-form-item label="加工" prop="data.o.c_is_process">
							<el-radio-group v-model="orderData.c_is_process" :disabled="true">
								<el-radio label="1">是</el-radio>
								<el-radio label="0">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>

					<!-- 加工模块：只在加工选择为"是"时显示 -->
					<el-col :span="24" v-if="orderData.c_is_process === '1'">
						<el-row :gutter="20">
							<!-- 加工方式 -->
							<el-col :span="12">
								<el-form-item label="加工方式" prop="data.o.c_process_type">
									<!-- <el-input
										v-model="orderData.c_process_type_name"
										readonly
										style="background-color: #f5f7fa"
									/> -->
									<span>{{ orderData.c_process_type_name }}</span>
								</el-form-item>
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="12">
						<el-form-item label="镜框品牌" prop="data.o.c_shop_name">
							<!-- <el-input v-model="remarkObj.brand" readonly /> -->
							<span>{{ remarkObj.brand }}</span>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="镜框型号" prop="data.o.c_shop_name">
							<!-- <el-input v-model="remarkObj.model" readonly /> -->
							<span>{{ remarkObj.model }}</span>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="镜框颜色" prop="data.o.c_shop_name">
							<!-- <el-input v-model="remarkObj.frameColor" readonly /> -->
							<span>{{ remarkObj.frameColor }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="镜框物流单号" prop="data.o.c_shop_name">
							<!-- <el-input v-model="remarkObj.logisticsNo" readonly /> -->
							<span>{{ remarkObj.logisticsNo }}</span>
						</el-form-item>
					</el-col>

					<!-- 订单状态时间轴 -->
					<el-divider content-position="left">订单状态流程</el-divider>
					<div v-if="orderLogs.length > 0" class="timeline-container">
						<div v-for="(log, index) in orderLogs" :key="index" class="timeline-item">
							<div
								class="timeline-node"
								:class="{ 'timeline-node-active': index === 0 }"
							></div>
							<div class="timeline-content">
								<div class="timeline-time">{{ log.create_time }}</div>
								<div
									class="timeline-text"
									:class="{ 'timeline-text-active': index === 0 }"
								>
									{{ log.log_desc }}
								</div>
							</div>
							<div v-if="index < orderLogs.length - 1" class="timeline-line"></div>
						</div>
					</div>
					<div v-else class="no-logs">暂无订单状态记录</div>
				</el-row>

				<!-- 操作按钮 -->
				<div class="form-actions">
					<el-button
						v-if="orderObj.orderProgress == 3 || orderObj.orderProgress == 4"
						@click="auditRefund(-1)"
						type="danger"
						>审核不通过</el-button
					>
					<el-button
						v-if="orderObj.orderProgress == 3 || orderObj.orderProgress == 4"
						@click="auditRefund(1)"
						type="success"
						>审核通过</el-button
					>
					<el-button
						v-if="orderObj.orderProgress == 2"
						type="success"
						@click="cancelOrder"
						>取消订单</el-button
					>
					<el-button
						v-if="orderObj.orderProgress == 1"
						type="success"
						@click="addTongkangOrder"
						>下单</el-button
					>
					<el-button @click="closeDialog">关闭</el-button>
				</div>
			</el-form>
		</el-card>
	</cl-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { useCool } from '/@/cool';
import { useI18n } from 'vue-i18n';

const { service } = useCool();
const { t } = useI18n();
const visible = ref(false);
const emit = defineEmits(['closeDialog', 'update:modelValue']);

const props = defineProps({
	orderId: {
		type: Number,
		default: 0
	},
	modelValue: {
		type: Boolean,
		default: false
	}
});

const options = reactive({
	orderProgress: [
		{
			label: '退换货审核不通过',
			value: -1
		},
		{
			label: '门店未下单',
			value: 0
		},
		{
			label: '待下单厂家',
			value: 1
		},
		{
			label: '待发货',
			value: 2
		},
		{
			label: '已发货',
			value: 3
		},
		{
			label: '已签收',
			value: 4
		},
		{
			label: '已完成',
			value: 5
		}
	]
});

// 订单数据
const orderData = reactive({
	contactName: '',
	contactPhone: '',
	receiveAddress: '',
	shopOrderTime: '',
	order_no: '',
	tongkangOrderTime: '',
	status: 0,
	status_text: '',
	kddh: '', //快递单号
	c_dial: '',
	c_diar: '',
	c_lball: '',
	c_rball: '',
	c_lpole: '',
	c_rpole: '',
	c_goods_l: '',
	c_goods_r: '',
	c_goods_l_desc: '',
	c_goods_r_desc: '',
	c_lnum: 1,
	c_rnum: 1,
	c_ladd: '',
	c_radd: '',
	c_lline: '',
	c_rline: '',
	c_is_process: 0,
	pd_r: 0,
	pd_l: 0,
	ph_r: 0,
	ph_l: 0,
	remark: '',
	c_process_type: '',
	c_process_type_name: '',
	c_coating_type: '',
	c_coating_type_name: '',
	orderProgress: 0
});

const remarkObj = ref({
	// 配镜用户
	userName: '',
	// 品牌
	brand: '',
	// 镜框型号
	model: '',
	// 镜框颜色
	frameColor: '',
	// 物流单号
	logisticsNo: '',
	// 备注字符串
	remark: ''
});

const orderObj = ref({});
const orderLogs = ref([]);

async function addTongkangOrder() {
	try {
		const res = await service.order.merchant.addTongkangOrder({
			order_id: props.orderId
		});
		console.log('addTongkangOrder', res);
		if (res.code == 20000) {
			ElMessage.success('下单成功');
			closeDialog();
		}
	} catch (error) {
		console.error('下单失败:', error);
		ElMessage.error('下单失败');
	}
}

// 退货单数据
const refundData = reactive({
	refundType: '',
	reason: '',
	refundNo: '',
	goodsName: '',
	createTime: null,
	proofImages: []
});

async function getRefundDetail() {
	if (!props.orderId) {
		ElMessage.error('订单ID不能为空');
		return;
	}

	try {
		// 调用API获取退货单详情
		const res = await service.order.refund.getRefundInfoById({
			orderId: props.orderId
		});
		if (res) {
			refundData.refundType = res.refundType === 1 ? '退货' : '换货';
			refundData.reason = res.refundReason;
			refundData.refundNo = res.refundNo;
			refundData.goodsName = res.orderGoods.goodsName;
			refundData.createTime = res.createTime;
			refundData.proofImages = res.proofImages;
			console.log(res);
			console.log(refundData);
		} else {
			ElMessage.error('获取退货单详情失败');
		}
	} catch (error) {
		console.error('获取退货单详情失败:', error);
		ElMessage.error('获取退货单详情失败');
	}
}

// 获取订单详情
async function getOrderDetail() {
	if (!props.orderId) {
		ElMessage.error('订单ID不能为空');
		return;
	}

	try {
		// 重置orderData的数据
		resetOrderData();
		// 调用API获取订单详情
		const res = await service.order.order.info({
			id: props.orderId
		});
		// console.log('getOrderDetail', res, res.data)
		if (res) {
			orderObj.value = res;
			// 将tongkangOrderRequestData赋值给orderData
			Object.assign(orderData, res.optometricsData);
			console.log(res.data, res.optometricsData);
			orderData.order_no = res.orderNo;
			orderData.tongkangOrderNo = res.tongkangOrderNo;
			orderData.tongkangOrderTime = res.tongkangOrderTime;
			orderData.kddh = res.zhongtianLogisticsNo;
			orderData.status_text = options.orderProgress.find(
				item => item.value == res.orderProgress
			)?.label;
			orderData.shopOrderTime = res.shopOrderTime;
			orderData.orderProgress = res.orderProgress;

			// 根据remark拆分赋值给remarkObj
			if (orderData.remark) {
				const remarkParts = orderData.remark.split(',');

				remarkObj.value.userName = remarkParts[0];
				remarkObj.value.brand = remarkParts[1];
				remarkObj.value.model = remarkParts[2];
				remarkObj.value.frameColor = remarkParts[3];
				remarkObj.value.logisticsNo = remarkParts[4];
				remarkObj.value.remark = remarkParts[5];
			}

			if (res.orderProgress >= 2) {
				getOrderLogs()
			}

			if (res.orderProgress > 2) {
				getRefundDetail();
			}
		} else {
			ElMessage.error('获取订单详情失败');
		}
	} catch (error) {
		console.error('获取订单详情失败:', error);
		ElMessage.error('获取订单详情失败');
	}
}

// 重置orderData的数据
async function resetOrderData() {
	console.log('重置数据');
	orderLogs.value = [];
	Object.assign(orderData, {
		contactName: '',
		contactPhone: '',
		receiveAddress: '',
		shopOrderTime: '',
		order_no: '',
		tongkangOrderTime: '',
		status: 0,
		status_text: '',
		kddh: '', //快递单号
		c_dial: '',
		c_diar: '',
		c_lball: '',
		c_rball: '',
		c_lpole: '',
		c_rpole: '',
		c_goods_l: '',
		c_goods_r: '',
		c_goods_l_desc: '',
		c_goods_r_desc: '',
		c_lnum: 1,
		c_rnum: 1,
		c_ladd: '',
		c_radd: '',
		c_lline: '',
		c_rline: '',
		c_is_process: 0,
		pd_r: 0,
		pd_l: 0,
		ph_r: 0,
		ph_l: 0,
		remark: '',
		c_process_type: '',
		c_process_type_name: '',
		c_coating_type: '',
		c_coating_type_name: '',
		orderProgress: 0
	});

	remarkObj.value = {
		brand: '',
		model: '',
		frameColor: '',
		logisticsNo: '',
		userName: '',
		remark: ''
	};
}

// 查看订单日志
async function getOrderLogs() {
	if (!props.orderId) {
		ElMessage.error('订单ID不能为空');
		return;
	}
	try {
		const result = await service.order.merchant.getOrderLogs({
			order_id: props.orderId
		});
		console.log('result', result);

		// 处理返回的订单日志数据
		if (result && result.code === 20000 && result.data && result.data.data) {
			// 确保日志按时间排序（最新的在前面）
			orderLogs.value = result.data.data.sort((a, b) => {
				return new Date(b.create_time).getTime() - new Date(a.create_time).getTime();
			});
		} else {
			orderLogs.value = [];
			ElMessage.warning('暂无订单状态记录');
		}
	} catch (error) {
		console.error('获取订单日志失败:', error);
		orderLogs.value = [];
	}
}

// 取消订单
async function cancelOrder() {
	if (props.orderId) {
		try {
			// 调用API获取订单详情
			const res = await service.order.merchant.cancelOrder({
				order_id: props.orderId
			});
			// console.log('getOrderDetail', res, res.data)
			if (res) {
				ElMessage.success('订单取消成功');
				closeDialog();
			} else {
				ElMessage.error('获取订单详情失败');
			}
		} catch (error) {
			console.error('获取订单详情失败:', error);
			ElMessage.error('获取订单详情失败');
		}
	}
}

// 关闭弹窗
function closeDialog() {
	emit('closeDialog');
}

// 审核售后订单
async function auditRefund(auditStatus) {
	if (props.orderId) {
		try {
			// 调用API获取订单详情
			const res = await service.order.refund.auditRefundExchange({
				orderId: props.orderId,
				auditStatus: auditStatus
			});
			// console.log('getOrderDetail', res, res.data)
			if (res) {
				ElMessage.success('订单审核完成');
				closeDialog();
			} else {
				ElMessage.error('获取订单详情失败');
			}
		} catch (error) {
			console.error('获取订单详情失败:', error);
			ElMessage.error('获取订单详情失败');
		}
	}
}

// 监听 modelValue 变化
watch(
	() => props.modelValue,
	val => {
		visible.value = val;
		if (val && props.orderId) {
			getOrderDetail();
		}
	}
);

// 监听 visible 变化
watch(
	() => visible.value,
	val => {
		emit('update:modelValue', val);
	}
);

// 监听 orderId 变化，重新获取订单详情
watch(
	() => props.orderId,
	newOrderId => {
		if (newOrderId && visible.value) {
			getOrderDetail();
		}
	}
);
</script>
<style scoped>
.zhongtian-add-order {
	padding: 20px;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.detail-item,
.payment-item {
	margin-bottom: 20px;
}

.detail-header,
.payment-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.border-top-blue {
	border-top: 3px solid #409eff;
}

.form-actions {
	margin-top: 30px;
	text-align: center;
}

.form-actions .el-button {
	margin: 0 10px;
}

/* 添加新的样式类 */
.inline-flex-container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
/* 时间轴样式 */
.timeline-container {
	margin-left: 20px;
	padding: 10px 0;
}

.timeline-item {
	display: flex;
	position: relative;
	margin-bottom: 20px;
}

.timeline-node {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #e0e0e0;
	position: relative;
	z-index: 10;
	margin-right: 16px;
}

.timeline-node-active {
	background-color: #409eff;
	box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.2);
}

.timeline-line {
	position: absolute;
	left: 5px;
	top: 12px;
	bottom: -20px;
	width: 2px;
	background-color: #e0e0e0;
}

.timeline-content {
	flex: 1;
}

.timeline-time {
	font-size: 12px;
	color: #909399;
	margin-bottom: 4px;
}

.timeline-text {
	font-size: 14px;
	color: #606266;
}

.timeline-text-active {
	color: #409eff;
	font-weight: 500;
}

.no-logs {
	text-align: center;
	color: #909399;
	padding: 20px;
}

/* 售后信息区域样式 */
.confirm-section {
	background-color: #f5f7fa;
	padding: 20px;
	border-radius: 4px;
	line-height: 1.8;
}

.confirm-item {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	margin: 0;
}

.confirm-label {
	color: #606266;
}

.confirm-value {
	color: #303133;
	text-align: right;
	flex: 1;
}
</style>
